@require './common'
@require '../Ripple/TouchRipple.styl'
@require '../Popover/Popover.styl'
@require '../Paper/Paper.styl'
@require '../Icon/Icon.styl'

.sm-menu-item
    display: flex
    align-items: center;
    flex-flow: row nowrap;
    padding: 0 $padding-hor
    line-height: $line-height
    position: relative
    font-size: 16px
    cursor: pointer
    overflow: hidden
    color: #000

    &:hover
        background-color: $light-grey


    &.state-disabled
        color: rgba(0, 0, 0, .38)
        cursor: not-allowed;

    &.state-selected
        color: $active-pink

    p
        float: left
    &.has-left p
        margin-left: $margin-with-icon

    &-left-icon
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 1.5rem;
        padding-right: 1rem;

        >.sm-icon
            size: 1.5rem;

    &-content
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        flex-flow: row nowrap;

    &-title
        flex: 1 1 auto;

    &-right-icon
        display: flex;
        align-items: center;
        justify-content: center;
        size: 1.5rem;

    &-cascade-icon
        display: block;
        color: rgba(0, 0, 0, 0.87);
        fill: rgb(117, 117, 117);
        height: 24px;
        width: 24px;
        user-select: none;
        transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        margin: 0px;
